<template>

    <div @click="newsDetail(i)" :class="{hotnews:i.top==1}" >
        <p class="news-title">
            <img class="icon-ding" :src="dings" alt />
            <span>{{i.title}}</span>
        </p>
        <p class="news-control clearfix">
            <span class="news-ly fl">{{i.copyfrom}}</span>
             <van-icon color="rgba(136,137,141,1)" class="icon-ydl fl" name="eye-o" /> 
            <span class="news-ydl fl">
               {{i.hits}}
            </span>
            <span class="news-time fr">{{i.addtime}}</span>
        </p>
    </div>

</template>

<script type="text/ecmascript-6">
import dings from "../../assets/img/icon-ding.png";

export default {
    props: ["i"],
    data() {
        return {
            dings
        };
    },
    methods: {
        newsDetail(i) {
            if (i.title==this.$route.query.title) {
                this.$toast('当前新闻')
                return false
            }
            this.$router.push({ name: "newsDetails", query: i });
        }
    }
};
</script>

<style scoped lang="less">
.news-title {
    font-size: 0.3rem;
    line-height: 0.4rem;
    max-height: 0.8rem;
    margin-bottom: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    .icon-ding {
        width: 0.3rem;
        height: 0.3rem;
        display: none;
    }
}
.hotnews {
    color: rgba(216, 45, 39, 1);
    .news-title {
        color: rgba(216, 45, 39, 1);
    }
    .icon-ding {
        display: inline;
    }
}
.news-control {
    color: rgba(136, 137, 141, 1);
    font-size: 0.22rem;
    line-height: 1;
    a{
         color: rgba(136, 137, 141, 1)!important; 
    }
    .news-ly {
        padding-right: 0.12rem;
        border-right: 0.01rem solid rgba(136, 137, 141, 1);
    }
    .news-ydl {
          padding-left: 0.05rem;
    font-size: 0.24rem;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .icon-ydl {
        margin-left: 0.1rem;
    }
}
</style>
